$(window).load(function () {
    let smallArea = $(".sm_area");
    let smallImg = $(".small_img");
    let bigArea = $(".big_area")
    let bigImg = $(".big_area img")

    smallArea.css({
        height: (smallImg.height() / bigImg.height()) * bigArea.height(),
        width: (smallImg.width() / bigImg.width()) * bigArea.width()
    })
    smallImg.on('mouseenter', function () {
        smallArea.show();
        bigArea.show();
        $(document).on("mousemove", function (e) {
            
            let mX = e.pageX - smallImg.offset().left - smallArea.width()/2;
            let mY = e.pageY - smallImg.offset().top - smallArea.height()/2;
           
            if(mX<=0){
                mX=0
            }
            if(mY<=0){
                mY=0
            }
            if(mX>=smallImg.offset().left){
                mX=smallImg.offset().left
            }
            if(mY>=smallImg.offset().top){
                mY=smallImg.offset().top
            }

            let oScale=bigArea.height()/smallArea.height();
            bigImg.css({
                left:-mX*oScale,
                top:-mY*oScale
            })
            smallArea.css({
                left: mX,
                top: mY
            })
          
        })


    }).on('mouseleave', function () {
        smallArea.hide();
        bigArea.hide();
        $(document).off("mousemove")
    })

})